<!DOCTYPE html>





<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 3.9.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico?v=7.4.0">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon.ico?v=7.4.0">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon.ico?v=7.4.0">
  <link rel="mask-icon" href="/images/logo.svg?v=7.4.0" color="#222">

<link rel="stylesheet" href="/css/main.css?v=7.4.0">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css?v=4.7.0">


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '7.4.0',
    exturl: false,
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false,"dimmer":false},
    copycode: {"enable":false,"show_result":false,"style":null},
    back2top: {"enable":true,"sidebar":false,"scrollpercent":false},
    bookmark: {"enable":false,"color":"#222","save":"auto"},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    algolia: {
      appID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.json',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    translation: {
      copy_button: '复制',
      copy_success: '复制成功',
      copy_failure: '复制失败'
    },
    sidebarPadding: 40
  };
</script>

  <meta name="description" content="1. npm 介绍npm 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。 npm不需要单独安装。在安装Node的时候，会连带一起安装npm。但是，Node附带的npm可能不是最新版本，最好用下面的命令，更新到最新版本。 1npm install npm@latest -g  上面的命令中，@latest表示最新版本，-g表示全局安装。所以，命令的主干是npm i">
<meta name="keywords" content="nodejs">
<meta property="og:type" content="article">
<meta property="og:title" content="nodejs的模块安装和package.json">
<meta property="og:url" content="https://unix2dos.github.io/p/d100a0c2.html">
<meta property="og:site_name" content="Levon&#39;s Blog">
<meta property="og:description" content="1. npm 介绍npm 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。 npm不需要单独安装。在安装Node的时候，会连带一起安装npm。但是，Node附带的npm可能不是最新版本，最好用下面的命令，更新到最新版本。 1npm install npm@latest -g  上面的命令中，@latest表示最新版本，-g表示全局安装。所以，命令的主干是npm i">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2019-09-27T15:36:51.111Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="nodejs的模块安装和package.json">
<meta name="twitter:description" content="1. npm 介绍npm 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。 npm不需要单独安装。在安装Node的时候，会连带一起安装npm。但是，Node附带的npm可能不是最新版本，最好用下面的命令，更新到最新版本。 1npm install npm@latest -g  上面的命令中，@latest表示最新版本，-g表示全局安装。所以，命令的主干是npm i">
  <link rel="canonical" href="https://unix2dos.github.io/p/d100a0c2">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true,
    isPage: false,
    isArchive: false
  };
</script>

  <title>nodejs的模块安装和package.json | Levon's Blog</title>
  








  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">
  <div class="container use-motion">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Levon's Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
        <h1 class="site-subtitle" itemprop="description">微信:  L6241425</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button aria-label="切换导航栏">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
      
      
      
        
        <li class="menu-item menu-item-home">
      
    

    <a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i> <br>首页</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-archives">
      
    

    <a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i> <br>时光</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-categories">
      
    

    <a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i> <br>分类</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-tags">
      
    

    <a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i> <br>标签</a>

  </li>
      <li class="menu-item menu-item-search">
        <a href="javascript:;" class="popup-trigger">
        
          <i class="menu-item-icon fa fa-search fa-fw"></i> <br>搜索</a>
      </li>
    
  </ul>

</nav>
  <div class="site-search">
    <div class="popup search-popup">
    <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocorrect="off" autocapitalize="none"
           placeholder="搜索..." spellcheck="false"
           type="text" id="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result"></div>

</div>
<div class="search-pop-overlay"></div>

  </div>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
            

          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
      <article itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block post">
    <link itemprop="mainEntityOfPage" href="https://unix2dos.github.io/p/d100a0c2.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Levon">
      <meta itemprop="description" content="Never Give Up">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Levon's Blog">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">nodejs的模块安装和package.json

          
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              
                
              

              <time title="创建时间：2019-05-10 20:01:00" itemprop="dateCreated datePublished" datetime="2019-05-10T20:01:00+08:00">2019-05-10</time>
            </span>
          
            

            
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2019-09-27 23:36:51" itemprop="dateModified" datetime="2019-09-27T23:36:51+08:00">2019-09-27</time>
              </span>
            
          
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/1-编程语言/" itemprop="url" rel="index"><span itemprop="name">1-编程语言</span></a></span>

                
                
                  ，
                
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/1-编程语言/nodejs/" itemprop="url" rel="index"><span itemprop="name">nodejs</span></a></span>

                
                
              
            </span>
          

          
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
        
      
      <span class="post-meta-item-text">Disqus：</span>
    
    <a title="disqus" href="/p/d100a0c2.html#comments" itemprop="discussionUrl"><span class="post-comments-count disqus-comment-count" data-disqus-identifier="p/d100a0c2.html" itemprop="commentCount"></span></a>
  </span>
  
  
          <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
              
                <span class="post-meta-item-text">本文字数：</span>
              
              <span>6k</span>
            </span>
          
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
              
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              
              <span>5 分钟</span>
            </span>
          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h3 id="1-npm-介绍"><a href="#1-npm-介绍" class="headerlink" title="1. npm 介绍"></a>1. npm 介绍</h3><p><a href="https://www.npmjs.com/package/npm" target="_blank" rel="noopener">npm</a> 是 Node 的模块管理器，功能极其强大。它是 Node 获得成功的重要原因之一。</p>
<p>npm不需要单独安装。在安装Node的时候，会连带一起安装npm。但是，Node附带的npm可能不是最新版本，最好用下面的命令，更新到最新版本。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install npm@latest -g</span><br></pre></td></tr></table></figure>

<p>上面的命令中，@latest表示最新版本，-g表示全局安装。所以，命令的主干是npm install npm，也就是使用npm安装自己。之所以可以这样，是因为npm本身与Node的其他模块没有区别。</p>
<a id="more"></a>



<h3 id="2-npm-安装"><a href="#2-npm-安装" class="headerlink" title="2. npm 安装"></a>2. npm 安装</h3><h4 id="2-1-npm-install"><a href="#2-1-npm-install" class="headerlink" title="2.1 npm install"></a>2.1 npm install</h4><p><a href="https://docs.npmjs.com/cli/install" target="_blank" rel="noopener">npm install</a> 命令用来安装模块到node_modules目录。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install &lt;packageName&gt;</span></span><br></pre></td></tr></table></figure>

<p>安装之前，npm install会先检查，node_modules目录之中是否已经存在指定模块。如果存在，就不再重新安装了，即使远程仓库已经有了一个新版本，也是如此。</p>
<p>如果你希望，一个模块不管是否安装过，npm 都要强制重新安装，可以使用-f或–force参数。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm install &lt;packageName&gt; --force</span></span><br></pre></td></tr></table></figure>

<h4 id="2-2-npm-update"><a href="#2-2-npm-update" class="headerlink" title="2.2 npm update"></a>2.2 npm update</h4><p>如果想更新已安装模块，就要用到<a href="https://docs.npmjs.com/cli/update" target="_blank" rel="noopener">npm update</a>命令。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm update &lt;packageName&gt;</span></span><br></pre></td></tr></table></figure>

<p>它会先到远程仓库查询最新版本，然后查询本地版本。如果本地版本不存在，或者远程版本较新，就会安装。</p>
<h4 id="2-3-registry"><a href="#2-3-registry" class="headerlink" title="2.3 registry"></a>2.3 registry</h4><p>npm update命令怎么知道每个模块的最新版本呢？</p>
<p>答案是 npm 模块仓库提供了一个查询服务，叫做 registry 。以 npmjs.org 为例，它的查询服务网址是 <a href="https://registry.npmjs.org/" target="_blank" rel="noopener">https://registry.npmjs.org/</a> 。</p>
<p>这个网址后面跟上模块名，就会得到一个 JSON 对象，里面是该模块所有版本的信息。比如，访问 <a href="https://registry.npmjs.org/react" target="_blank" rel="noopener">https://registry.npmjs.org/react</a>，就会看到 react 模块所有版本的信息。</p>
<p>它跟下面命令的效果是一样的。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm view react</span></span><br></pre></td></tr></table></figure>

<p>registry 网址的模块名后面，还可以跟上版本号或者标签，用来查询某个具体版本的信息。比如， 访问 <a href="https://registry.npmjs.org/react/v0.14.6" target="_blank" rel="noopener">https://registry.npmjs.org/react/v0.14.6</a> ，就可以看到 React 的 0.14.6 版。</p>
<p>返回的 JSON 对象里面，有一个dist.tarball属性，是该版本压缩包的网址。</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">dist: &#123;   </span><br><span class="line">	shasum: '2a57c2cf8747b483759ad8de0fa47fb0c5cf5c6a',   </span><br><span class="line">	tarball: 'http://registry.npmjs.org/react/-/react-0.14.6.tgz'  </span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>到这个网址下载压缩包，在本地解压，就得到了模块的源码。<code>npm install</code>和<code>npm update</code>命令，都是通过这种方式安装模块的。</p>
<h4 id="2-4-缓存目录"><a href="#2-4-缓存目录" class="headerlink" title="2.4 缓存目录"></a>2.4 缓存目录</h4><p>npm install或npm update命令，从 registry 下载压缩包之后，都存放在本地的缓存目录。</p>
<p>这个缓存目录，在 Linux 或 Mac 默认是用户主目录下的.npm目录，在 Windows 默认是%AppData%/npm-cache。通过配置命令，可以查看这个目录的具体位置。</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm config get cache </span></span><br><span class="line">/Users/liuwei/.npm</span><br></pre></td></tr></table></figure>



<p>.npm目录保存着大量文件，清空它的命令如下。 </p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> rm -rf ~/.npm/ </span></span><br><span class="line">或</span><br><span class="line"><span class="meta">$</span><span class="bash"> npm cache clean</span></span><br></pre></td></tr></table></figure>

<h4 id="2-5-模块的安装过程"><a href="#2-5-模块的安装过程" class="headerlink" title="2.5 模块的安装过程"></a>2.5 模块的安装过程</h4><p>总结一下，Node模块的安装过程是这样的。</p>
<ol>
<li>发出npm install命令</li>
<li>npm 向 registry 查询模块压缩包的网址</li>
<li>下载压缩包，存放在~/.npm目录</li>
<li>解压压缩包到当前项目的node_modules目录</li>
</ol>
<p>注意，一个模块安装以后，本地其实保存了两份。一份是~/.npm目录下的压缩包，另一份是node_modules目录下解压后的代码。</p>
<p>但是，运行npm install的时候，只会检查node_modules目录，而不会检查~/.npm目录。也就是说，如果一个模块在～/.npm下有压缩包，但是没有安装在node_modules目录中，npm 依然会从远程仓库下载一次新的压缩包。</p>
<h3 id="3-package-json"><a href="#3-package-json" class="headerlink" title="3. package.json"></a>3. package.json</h3><p>管理本地安装 npm 包的最好方式就是创建 package.json 文件。一个 package.json 文件可以有以下几点作用：</p>
<ul>
<li><p>作为一个描述文件，描述了你的项目依赖哪些包</p>
</li>
<li><p>允许我们使用 “语义化版本规则”（后面介绍）指明你项目依赖包的版本</p>
</li>
<li><p>让你的构建更好地与其他开发者分享，便于重复使用</p>
</li>
</ul>
<p>使用 <code>npm init</code> 即可在当前目录创建一个 <code>package.json</code> 文件。如果嫌回答这一大堆问题麻烦，可以直接输入<code>npm init -—yes</code> 跳过回答问题步骤，直接生成默认值的 package.json 文件：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">  <span class="attr">"name"</span>: <span class="string">"package"</span>,</span><br><span class="line">  <span class="attr">"version"</span>: <span class="string">"1.0.0"</span>,</span><br><span class="line">  <span class="attr">"description"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"main"</span>: <span class="string">"index.js"</span>,</span><br><span class="line">  <span class="attr">"scripts"</span>: &#123;</span><br><span class="line">    <span class="attr">"test"</span>: <span class="string">"echo \"Error: no test specified\" &amp;&amp; exit 1"</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">"keywords"</span>: [],</span><br><span class="line">  <span class="attr">"author"</span>: <span class="string">""</span>,</span><br><span class="line">  <span class="attr">"license"</span>: <span class="string">"ISC"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="3-1-package-json-的内容"><a href="#3-1-package-json-的内容" class="headerlink" title="3.1 package.json 的内容"></a>3.1 package.json 的内容</h4><h5 id="3-1-1-package-json-文件至少要有两部分内容："><a href="#3-1-1-package-json-文件至少要有两部分内容：" class="headerlink" title="3.1.1 package.json 文件至少要有两部分内容："></a>3.1.1 <code>package.json</code> 文件至少要有两部分内容：</h5><ol>
<li>“name”<ul>
<li>全部小写，没有空格，可以使用下划线或者横线</li>
</ul>
</li>
<li>“version” <ul>
<li>x.x.x 的格式</li>
<li>符合“语义化版本规则”</li>
</ul>
</li>
</ol>
<h5 id="3-1-2-其他内容："><a href="#3-1-2-其他内容：" class="headerlink" title="3.1.2 其他内容："></a>3.1.2 其他内容：</h5><ul>
<li>description：描述信息，有助于搜索</li>
<li>main: <code>入口文件</code>，一般都是 index.js. 当使用require()语法来加载一个模块时，就会看此值</li>
<li>scripts：支持的脚本，默认是一个空的 test</li>
<li>keywords：关键字，有助于在人们使用 npm search 搜索时发现你的项目</li>
<li>author：作者信息</li>
<li>license：默认是 MIT</li>
<li>bugs：当前项目的一些错误信息，如果有的话</li>
</ul>
<h5 id="3-1-3-scripts属性"><a href="#3-1-3-scripts属性" class="headerlink" title="3.1.3 scripts属性"></a>3.1.3 scripts属性</h5><p>可以指定npm命令缩写。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&quot;scripts&quot;: &#123;</span><br><span class="line">  &quot;start&quot;: &quot;node store.js&quot;</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>

<p>执行npm run start仍然可以运行成功，通过scripts属性npm run start等价于node store.js。关于scripts的更具体的使用<a href="http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html" target="_blank" rel="noopener">请看这里</a>。</p>
<h4 id="3-2-指定依赖的包"><a href="#3-2-指定依赖的包" class="headerlink" title="3.2 指定依赖的包"></a>3.2 指定依赖的包</h4><p>我们需要在 <code>package.json</code> 文件中指定项目依赖的包，这样别人在拿到这个项目时才可以使用 <code>npm install</code> 下载。</p>
<p>包有两种依赖方式：</p>
<ol>
<li><code>dependencies</code>：在生产环境中需要用到的依赖</li>
<li><code>devDependencies</code>：在开发、测试环境中用到的依赖</li>
</ol>
<p>举个例子：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    &quot;name&quot;: &quot;my-weex-demo&quot;,</span><br><span class="line">    &quot;version&quot;: &quot;1.0.0&quot;,</span><br><span class="line">    &quot;description&quot;: &quot;a weex project&quot;,</span><br><span class="line">    &quot;main&quot;: &quot;index.js&quot;,</span><br><span class="line">    &quot;devDependencies&quot;: &#123;</span><br><span class="line">        &quot;babel-core&quot;: &quot;^6.14.0&quot;,</span><br><span class="line">        &quot;babel-loader&quot;: &quot;^6.2.5&quot;,</span><br><span class="line">        &quot;babel-preset-es2015&quot;: &quot;^6.18.0&quot;,</span><br><span class="line">        &quot;vue-loader&quot;: &quot;^10.0.2&quot;,</span><br><span class="line">        &quot;eslint&quot;: &quot;^3.5.0&quot;,</span><br><span class="line">        &quot;serve&quot;: &quot;^1.4.0&quot;,</span><br><span class="line">        &quot;webpack&quot;: &quot;^1.13.2&quot;,</span><br><span class="line">        &quot;weex-loader&quot;: &quot;^0.3.3&quot;,</span><br><span class="line">        &quot;weex-builder&quot;: &quot;^0.2.6&quot;</span><br><span class="line">    &#125;,</span><br><span class="line">    &quot;dependencies&quot;: &#123;</span><br><span class="line">        &quot;weex-html5&quot;: &quot;^0.3.2&quot;,</span><br><span class="line">        &quot;weex-components&quot;: &quot;*&quot;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h4 id="3-3-semantic-versioning（语义化版本规则）"><a href="#3-3-semantic-versioning（语义化版本规则）" class="headerlink" title="3.3 semantic versioning（语义化版本规则）"></a>3.3 semantic versioning（语义化版本规则）</h4><p>dependencies 的内容，以 “weex-html5”: “^0.3.2” 为例，我们知道 key 是依赖的包名称，value 是这个包的版本。那版本前面的 ^ 或者版本直接是一个 * 是什么意思呢？这就是 npm 的 “Semantic versioning”，简称”Semver”，中文含义即“语义化版本规则”。</p>
<p>在开发中我们有过这样的经验：有时候依赖的包升级后大改版，之前提供的接口不见了，这对使用者的项目可能造成极大的影响。因此我们在声明对某个包的依赖时需要指明是否允许 update 到新版本，什么情况下允许更新。这就需要先了解 npm 包提供者应该注意的版本号规范。</p>
<p>如果一个项目打算与别人分享，应该从 1.0.0 版本开始。以后要升级版本应该遵循以下标准：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">补丁版本：解决了 Bug 或者一些较小的更改，增加最后一位数字，比如 1.0.1</span><br><span class="line">小版本：增加了新特性，同时不会影响之前的版本，增加中间一位数字，比如 1.1.0</span><br><span class="line">大版本：大改版，无法兼容之前的，增加第一位数字，比如 2.0.0</span><br><span class="line"></span><br><span class="line">了解了提供者的版本规范后， npm 包使用者就可以针对自己的需要填写依赖包的版本规则。</span><br></pre></td></tr></table></figure>

<p>作为使用者，我们可以在 package.json 文件中写明我们可以接受这个包的更新程度（假设当前依赖的是 1.0.4 版本）：</p>
<p>如果只打算接受补丁版本的更新（也就是最后一位的改变），就可以这么写： </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1.0</span><br><span class="line">1.0.x</span><br><span class="line">~1.0.4</span><br></pre></td></tr></table></figure>

<p>如果接受小版本的更新（第二位的改变），就可以这么写： </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">1</span><br><span class="line">1.x</span><br><span class="line">^1.0.4</span><br></pre></td></tr></table></figure>

<p>如果可以接受大版本的更新（自然接受小版本和补丁版本的改变），就可以这么写： </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">*</span><br><span class="line">x</span><br></pre></td></tr></table></figure>

<p>小结一下：总共三种版本变化类型，接受依赖包哪种类型的更新，就把版本号准确写到前一位。</p>
<h3 id="4-其他安装知识"><a href="#4-其他安装知识" class="headerlink" title="4. 其他安装知识"></a>4. 其他安装知识</h3><h4 id="4-1-安装参数-–save-和-–save-dev"><a href="#4-1-安装参数-–save-和-–save-dev" class="headerlink" title="4.1 安装参数 –save 和 –save -dev"></a>4.1 安装参数 –save 和 –save -dev</h4><p>添加依赖时我们可以手动修改 package.json 文件，添加或者修改 dependencies devDependencies 中的内容即可。另一种更酷的方式是用命令行，在使用 npm install 时增加 –save 或者 –save -dev 后缀：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm install &lt;package_name&gt; --save 表示将这个包名及对应的版本添加到 package.json的 dependencies</span><br><span class="line"></span><br><span class="line">npm install &lt;package_name&gt; --save-dev 表示将这个包名及对应的版本添加到 package.json的 devDependencies</span><br></pre></td></tr></table></figure>

<p>dependencies：在生产环境中需要用到的依赖</p>
<p>devDependencies：在开发、测试环境中用到的依赖</p>
<h4 id="4-2-全局安装-package"><a href="#4-2-全局安装-package" class="headerlink" title="4.2 全局安装 package"></a>4.2 全局安装 package</h4><p>如果你想要直接在命令行中使用某个包，比如 jshint ，你可以全局安装它。全局安装比本地安装多了个 -g:</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g &lt;package-name&gt;</span><br></pre></td></tr></table></figure>

<p>安装后可以使用 npm ls -g –depth=0 查看安装在全局第一层的包。</p>
<h5 id="4-2-1-全局安装的权限问题"><a href="#4-2-1-全局安装的权限问题" class="headerlink" title="4.2.1 全局安装的权限问题"></a>4.2.1 全局安装的权限问题</h5><p>在全局安装时可能会遇到 EACCES 权限问题, 可以如下解决：</p>
<p>1.使用 sudo 简单粗暴，但是治标不治本</p>
<p>2.修改 npm 全局默认目录的权限</p>
<p>先获取 npm 全局目录：<code>npm config get prefix</code>，一般都是 /usr/local； 然后修改这个目录权限为当前用户：</p>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">sudo chown -R $(whoami) $(npm config get prefix)/&#123;lib/node_modules,bin,share&#125;</span><br></pre></td></tr></table></figure>

<h4 id="4-3-package-lock-json"><a href="#4-3-package-lock-json" class="headerlink" title="4.3 package-lock.json"></a>4.3 package-lock.json</h4><p>原来package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，你每次npm install都是拉取的该大版本下的最新的版本，为了稳定性考虑我们几乎是不敢随意升级依赖包的，这将导致多出来很多工作量，测试/适配等，所以package-lock.json文件出来了，当你每次安装一个依赖的时候就锁定在你安装的这个版本。</p>
<p>那如果我们安装时的包有bug，后面需要更新怎么办？</p>
<p> 在以前可能就是直接改package.json里面的版本，然后再npm install了，但是5版本后就不支持这样做了，因为版本已经锁定在package-lock.json里了，所以我们只能npm install <a href="mailto:xxx@x.x.x" target="_blank" rel="noopener">xxx@x.x.x</a>  这样去更新我们的依赖，然后package-lock.json也能随之更新。</p>
<h3 id="参考资料"><a href="#参考资料" class="headerlink" title="参考资料:"></a>参考资料:</h3><p><a href="http://www.ruanyifeng.com/blog/2016/01/npm-install.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2016/01/npm-install.html</a></p>
<p><a href="http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html</a></p>
<p><a href="https://blog.csdn.net/u011240877/article/details/76582670" target="_blank" rel="noopener">https://blog.csdn.net/u011240877/article/details/76582670</a></p>

    </div>

    
    
    
        
      
        <div id="reward-container">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作, 一个耿直的笑脸~</div>
  <button id="reward-button" disable="enable" onclick="var qr = document.getElementById(&quot;qr&quot;); qr.style.display = (qr.style.display === 'none') ? 'block' : 'none';">
    打赏
  </button>
  <div id="qr" style="display: none;">
        
      
      <div style="display: inline-block">
        <img src="/images/wechatpay.jpg" alt="Levon 微信支付">
        <p>微信支付</p>
      </div>
        
      
      <div style="display: inline-block">
        <img src="/images/alipay.jpg" alt="Levon 支付宝">
        <p>支付宝</p>
      </div>

  </div>
</div>

      

      <footer class="post-footer">
          
            
          
          <div class="post-tags">
            
              <a href="/tags/nodejs/" rel="tag"># nodejs</a>
            
          </div>
        

        

          <div class="post-nav">
            <div class="post-nav-next post-nav-item">
              
                <a href="/p/74d8b7c3.html" rel="next" title="nodejs介绍和javascript的区别">
                  <i class="fa fa-chevron-left"></i> nodejs介绍和javascript的区别
                </a>
              
            </div>

            <span class="post-nav-divider"></span>

            <div class="post-nav-prev post-nav-item">
              
                <a href="/p/df22a20c.html" rel="prev" title="node版本管理nvm的安装和使用">
                  node版本管理nvm的安装和使用 <i class="fa fa-chevron-right"></i>
                </a>
              
            </div>
          </div>
        
      </footer>
    
  </div>
  
  
  
  </article>

  </div>


          </div>
          
    
    
  <div class="comments" id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
    </div>
  </div>
  
  

        </div>
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">
        
        
        
        
      

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-npm-介绍"><span class="nav-number">1.</span> <span class="nav-text">1. npm 介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-npm-安装"><span class="nav-number">2.</span> <span class="nav-text">2. npm 安装</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-npm-install"><span class="nav-number">2.1.</span> <span class="nav-text">2.1 npm install</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-npm-update"><span class="nav-number">2.2.</span> <span class="nav-text">2.2 npm update</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-3-registry"><span class="nav-number">2.3.</span> <span class="nav-text">2.3 registry</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-4-缓存目录"><span class="nav-number">2.4.</span> <span class="nav-text">2.4 缓存目录</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-5-模块的安装过程"><span class="nav-number">2.5.</span> <span class="nav-text">2.5 模块的安装过程</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-package-json"><span class="nav-number">3.</span> <span class="nav-text">3. package.json</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#3-1-package-json-的内容"><span class="nav-number">3.1.</span> <span class="nav-text">3.1 package.json 的内容</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#3-1-1-package-json-文件至少要有两部分内容："><span class="nav-number">3.1.1.</span> <span class="nav-text">3.1.1 package.json 文件至少要有两部分内容：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#3-1-2-其他内容："><span class="nav-number">3.1.2.</span> <span class="nav-text">3.1.2 其他内容：</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#3-1-3-scripts属性"><span class="nav-number">3.1.3.</span> <span class="nav-text">3.1.3 scripts属性</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-2-指定依赖的包"><span class="nav-number">3.2.</span> <span class="nav-text">3.2 指定依赖的包</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3-3-semantic-versioning（语义化版本规则）"><span class="nav-number">3.3.</span> <span class="nav-text">3.3 semantic versioning（语义化版本规则）</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-其他安装知识"><span class="nav-number">4.</span> <span class="nav-text">4. 其他安装知识</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#4-1-安装参数-–save-和-–save-dev"><span class="nav-number">4.1.</span> <span class="nav-text">4.1 安装参数 –save 和 –save -dev</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-2-全局安装-package"><span class="nav-number">4.2.</span> <span class="nav-text">4.2 全局安装 package</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#4-2-1-全局安装的权限问题"><span class="nav-number">4.2.1.</span> <span class="nav-text">4.2.1 全局安装的权限问题</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4-3-package-lock-json"><span class="nav-number">4.3.</span> <span class="nav-text">4.3 package-lock.json</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参考资料"><span class="nav-number">5.</span> <span class="nav-text">参考资料:</span></a></li></ol></div>
        
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image"
      src="/images/avatar.jpg"
      alt="Levon">
  <p class="site-author-name" itemprop="name">Levon</p>
  <div class="site-description" itemprop="description">Never Give Up</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        
          <a href="/archives/">
        
          <span class="site-state-item-count">127</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-categories">
        
          
            <a href="/categories/">
          
        
        <span class="site-state-item-count">34</span>
        <span class="site-state-item-name">分类</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-tags">
        
          
            <a href="/tags/">
          
        
        <span class="site-state-item-count">76</span>
        <span class="site-state-item-name">标签</span>
        </a>
      </div>
    
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://github.com/unix2dos" title="GitHub &rarr; https://github.com/unix2dos" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="mailto:levonfly@gmail.com" title="E-Mail &rarr; mailto:levonfly@gmail.com" rel="noopener" target="_blank"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://twitter.com/levonfly" title="Twitter &rarr; https://twitter.com/levonfly" rel="noopener" target="_blank"><i class="fa fa-fw fa-twitter"></i>Twitter</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://weibo.com/l6241425" title="Weibo &rarr; https://weibo.com/l6241425" rel="noopener" target="_blank"><i class="fa fa-fw fa-weibo"></i>Weibo</a>
      </span>
    
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Levon</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    <span title="站点总字数">507k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
    <span title="站点阅读时长">7:41</span>
</div>

        












        
      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js?v=3.1.0"></script>
  <script src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  <script src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
<script src="/js/utils.js?v=7.4.0"></script><script src="/js/motion.js?v=7.4.0"></script>
<script src="/js/schemes/pisces.js?v=7.4.0"></script>

<script src="/js/next-boot.js?v=7.4.0"></script>



  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>








  <script src="/js/local-search.js?v=7.4.0"></script>














  

  

  

<script>
  function loadCount() {
    var d = document, s = d.createElement('script');
    s.src = 'https://levonfly.disqus.com/count.js';
    s.id = 'dsq-count-scr';
    (d.head || d.body).appendChild(s);
  }
  // defer loading until the whole page loading is completed
  window.addEventListener('load', loadCount, false);
</script>
<script>
  function disqus_config() {
    this.page.url = "https://unix2dos.github.io/p/d100a0c2.html";
    this.page.identifier = "p/d100a0c2.html";
    this.page.title = 'nodejs的模块安装和package.json';};
  function loadComments() {
    if (window.DISQUS) {
      DISQUS.reset({
        reload: true,
        config: disqus_config
      });
    } else {
      var d = document, s = d.createElement('script');
      s.src = 'https://levonfly.disqus.com/embed.js';
      s.setAttribute('data-timestamp', '' + +new Date());
      (d.head || d.body).appendChild(s);
    }
  }
    window.addEventListener('load', loadComments, false);
  
</script>

</body>
</html>
